<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-注册</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<#--    <script type="text/javascript" src="js/register.js"></script>-->
</head>
<body>

<style type="text/css">
    .right{
        color: greenyellow;
        font-weight: bold;
    }

    .wrong{
        color: red;
        font-weight: bold;
    }

</style>

<script>
    /*
     *账号输入框失去焦点，先进行表单正则校验，校验通过发起ajax请求，查询该账号能不能注册
     */
    function checkusername() {
        //获取用户的输入
        let username = $("#user_name").val();
        //定义正则 ->长度为4-15位
        let reg1 = /^\w{4,15}$/;

        //使用正则和字符串进行校验判断 正则.test方法

        if(!reg1.test(username))
        {
            document.getElementById("namespan").innerHTML="格式错误";
            document.getElementById("namespan").className="wrong";
            return false;
        }else{
            document.getElementById("namespan").innerHTML="√";
            document.getElementById("namespan").className="right";
            return true;
        }
    }
</script>
<script>
    //var flag1=false;
    function checkusertel() {
        //获取用户的输入
        let userphone =$("#user_phone").val();
        //定义正则
        let reg1 = /^1[356789]\d{9}$/;



        //使用正则和字符串进行校验判断 正则.test方法
        if(!reg1.test(userphone)||userphone==null)
        {
            document.getElementById("phonespan").innerHTML="格式错误";
            document.getElementById("phonespan").className="wrong";
            return false;
        }else{
            document.getElementById("phonespan").innerHTML="√";
            document.getElementById("phonespan").className="right";
            return true;
        }
    }
</script>
<script>
    function checkuserpwd() {

        //获取用户的输入
        let userpwd = $("#user_pwd").val();

        //定义正则 长度8-16位
        let reg1 = /^\w{8,16}$/;

        //使用正则和字符串进行校验判断 正则.test方法
        if(!reg1.test(userpwd))
        {
            document.getElementById("pwdspan").innerHTML="格式错误";
            document.getElementById("pwdspan").className="wrong";
            return false;
        }else{
            document.getElementById("pwdspan").innerHTML="√";
            document.getElementById("pwdspan").className="right";
            return true;
        }
    }
</script>

<script>
    function checkall(){
        return checkusername()&&checkusertel()&&checkuserpwd();

    }
</script>

<script>

    function register(){
        if(checkall()){
            //1获取输入框输入的值
            let username = $("#user_name").val();
            let userphone =$("#user_phone").val();
            let userpwd = $("#user_pwd").val();

        }else{
            alert("注册信息有误");
        }
    }

</script>

<div class="register_con">
    <div class="l_con fl">
        <a class="reg_logo"><img src="images/logo02.png"></a>
        <div class="reg_slogan">足不出户  ·  新鲜每一天</div>
        <div class="reg_banner"></div>
    </div>

    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1>用户注册</h1>
            <a href="#">登录</a>
        </div>
        <div class="reg_form clearfix">
            <form action="/register1" method="post" id="form">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" name="user_name" id="user_name" onblur="checkusername()">
                        <span class="error_tip" id="namespan">提示信息</span>
                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" name="user_pwd" id="user_pwd" onblur="checkuserpwd()">
                        <span class="error_tip" id="pwdspan">提示信息</span>
                    </li>
                    <li>
                        <label>手机号:</label>
                        <input type="text" name="user_phone" id="user_phone" onblur="checkusertel()">
                        <span class="error_tip" id="phonespan">提示信息</span>
                    </li>
                    <li class="agreement">
                        <input type="checkbox" name="allow" id="allow" checked="checked">
                        <label>同意”天天生鲜用户使用协议“</label>
                        <span class="error_tip2">提示信息</span>
                    </li>
                    <li class="reg_sub">
                        <input type="submit" value="注 册" name="" onclick="register()">
                    </li>
                </ul>
            </form>
        </div>

    </div>

</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888    京ICP备*******8号</p>
</div>

</body>
</html>